<template>
  <basic-container>
    <avue-crud :option="option" :data="data" v-model:page="page" @row-save="rowSave" @row-del="rowDel"
      @refresh-change="refreshChange" @row-update="rowUpdate" v-model:search="search" @search-change='searchChange'
      @search-reset="searchReset"></avue-crud>
  </basic-container>
</template>

<script setup>
import { list, add, del, update } from '@/api/crud/index';
import { ref, watch, onMounted } from 'vue';
import { getPageScope, setStorePage, setStoreCache, getStoreCache ,option} from './table'
import { ElMessage } from 'element-plus'
const data = ref([])
const search = ref({})


const rowSave = async (row, done, loading) => {
  loading()
  row.id = 0
  const { tableData } = getStoreCache()
  tableData.forEach((item) => {
    item.id += 1
  })
  tableData.push(row)
  page.value.total += 1
  const cache = await setStoreCache(tableData, page)
  if (cache) {
    const { tableData } = getStoreCache()
    const scope = getPageScope(page.value.currentPage)
    setTimeout(() => {
      data.value = tableData.filter((item) => { return item.id >= scope.start && item.id <= scope.end }) || [];
      ElMessage({
        type: 'success',
        message: '保存成功'
      })
      done(row)
    }, 1000)

  } else {
    setTimeout(() => {
      ElMessage({
        type: 'error',
        message: '保存失败'
      })
      done(row)
    })
  }
}
const rowDel = async (row, index) => {
  const { tableData } = getStoreCache()
  tableData.splice(tableData.findIndex((item) => { return item.id === row.id }), 1)
  const newData = tableData.reduce((acc, current) => {
    if (current.id > row.id) {
      current.id -= 1
    }
    return [...acc, current]
  }, [])
  page.value.total -= 1
  const cache = await setStoreCache(newData, page)
  if (cache) {
    const { tableData } = getStoreCache()
    const scope = getPageScope(page.value.currentPage)
    setTimeout(() => {
      data.value = tableData.filter((item) => { return item.id >= scope.start && item.id <= scope.end }) || []
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
    }, 1000)
  } else {
    ElMessage({
      type: 'error',
      message: '删除失败'
    })
  }
}
const rowUpdate = async (row, index, done, loading) => {
  const { tableData } = getStoreCache()
  tableData[tableData.findIndex((item) => {
    return item.id === row.id
  })] = row
  const cache = await setStoreCache(tableData, page)
  if (cache) {
    const { tableData } = getStoreCache()
    const scope = getPageScope(page.value.currentPage)
    setTimeout(() => {
      data.value = tableData.filter((item) => { return item.id >= scope.start && item.id <= scope.end }) || []
      ElMessage({
        type: 'success',
        message: '修改成功'
      })
      done(row)
    }, 1000)
  } else {
    setTimeout(() => {
      ElMessage({
        type: 'error',
        message: '修改失败'
      })
      done(row)
    }, 1000)
  }
}
const searchChange = async (form, done) => {
  const { tableData } = getStoreCache()
  let list = []
  if (search.value.name && search.value.name !== '') {
    list = tableData.filter((item) => {
      return item.name.indexOf(search.value.name) !== -1
    })
  }
  if (search.value.phone && search.value.phone !== '') {
    list = tableData.filter((item) => {
      return item.phone.toString().indexOf(search.value.phone.toString()) !== -1
    })
  }
  if (search.value.name && search.value.name !== '' && search.value.phone && search.value.phone !== '') {
    list = tableData.filter((item) => {
      return item.name.indexOf(search.value.name) !== -1 && item.phone.toString().indexOf(search.value.phone.toString()) !== -1
    })
  }
  setTimeout(() => {
    page.value.total = list.length
    page.value.currentPage = 1
    const scope = getPageScope(page.value.currentPage)
    data.value = list.filter((item) => { return item.id >= scope.start && item.id <= scope.end }) || []
    done()
  }, 500)
}
const searchReset = () => {
  search.value = {}
  const { tableData, pageCache } = getStoreCache()
  if (tableData && pageCache) {
    page.value = pageCache
    const scope = getPageScope(page.value.currentPage)
    data.value = tableData.filter((item) => { return item.id >= scope.start && item.id <= scope.end }) || []
  } else {
    getList()
  }
}
const refreshChange = () => {
  setTimeout(() => {
    const { tableData, pageCache } = getStoreCache()
    page.value = pageCache
    const scope = getPageScope(page.value.currentPage)
    data.value = tableData.filter((item) => { return item.id >= scope.start && item.id <= scope.end }) || []
  }, 1000)
}
// 分页
const page = ref({
  currentPage: 1,
  pageSize: 10,
  total: 20,
  layout: 'total, prev, pager, next, jumper'
})
watch(() => page.value.currentPage, (val) => {
  const pageCache = setStorePage(page)
  const { tableData } = getStoreCache()
  if (tableData && pageCache) {
    const scope = getPageScope(page.value.currentPage)
    data.value = tableData.filter((item) => { return item.id >= scope.start && item.id <= scope.end }) || []
  } else {
    getList()
  }
})

// 初始化
const getList = async () => {
  const res = await list({
    page: page.value.currentPage,
    size: page.value.pageSize,
  })
  const cache = setStoreCache(res.data.data.list, page)
  if (cache) {
    const scope = getPageScope(page.value.currentPage)
    data.value = res.data.data?.list.filter((item) => { return item.id >= scope.start && item.id <= scope.end }) || []
  }
}
onMounted(async () => {
  const { tableData, pageCache } = getStoreCache()
  if (tableData && pageCache) {
    page.value = pageCache
    const scope = getPageScope(page.value.currentPage)
    data.value = tableData.filter((item) => { return item.id >= scope.start && item.id <= scope.end }) || []
  } else {
    getList()
  }
})

</script>

<style></style>